const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

const FLOWER_WIDTH = 100
const FLOWER_HEIGHT = 100
// 渲染器渲染
export default class Star {
  constructor() {

    // 定义渲染主角的属性
    this.voiceData = this.voiceData
    this.loaded = this.loaded
    this.x = screenWidth / 2 - this.width / 2
    this.y = screenHeight / 2 - this.height / 2
    this.index = 0
    this.stars = []
    this.status = false
    this.avgData = []
    this.colors = [
      [61, 151, 198],
      [61, 151, 198],
      [61, 151, 198],
      [61, 151, 198],
      [61, 151, 198],
      [61, 151, 198],
      [61, 151, 198],
      [61, 151, 198],
      [61, 151, 198],
      [61, 151, 198],
      [62, 150, 197],
      [70, 145, 191],
      [80, 137, 182],
      [92, 129, 173],
      [106, 119, 162],
      [120, 109, 151],
      [136, 98, 139],
      [151, 87, 126],
      [167, 76, 114],
      [183, 65, 102],
      [198, 55, 90],
      [211, 45, 79],
      [223, 37, 70],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54],
      [243, 23, 54]
    ]
  }
  getData(avgData) {
    this.avgData = avgData
    // console.log(this.avgData)
    this.createStarField()
  }
  createStarField() {
    let i = -1;
    while (++i < 100) {
      this.stars.push(new this.Star(this.avgData[0]));
    }
    // console.log(this.stars)s
    this.status = true
  }
  Star(avg) {
    var xc, yc;
    let w = window.innerWidth
    let h = window.innerHeight
    let cx = w / 2;
    let cy = h / 2;
    this.avg = avg
    this.x = Math.random() * w - cx;
    this.y = Math.random() * h - cy;

    this.z = this.max_depth = Math.max(w / h);
    this.radius = 0.2;

    xc = this.x > 0 ? 1 : -1;
    yc = this.y > 0 ? 1 : -1;

    if (Math.abs(this.x) > Math.abs(this.y)) {
      this.dx = 1.0;
      this.dy = Math.abs(this.y / this.x);
    } else {
      this.dx = Math.abs(this.x / this.y);
      this.dy = 1.0;
    }

    this.dx *= xc;
    this.dy *= yc;
    this.dz = -0.1;

    this.ddx = .001 * this.dx;
    this.ddy = .001 * this.dy;

    if (this.y > (cy / 2)) {
      this.color = '#B5BFD4';
    } else {
      if (this.avg > 110) {
        this.color = '#B5BFD4';
      } else if (this.avg > 140) {
        this.color = '#F451BA';
      } else {
        this.color = '#465677';
      }
    }

    // xc = yc = null;
  }
  render(ctx) {

    this.index++
    // console.log(this.index)
    var i, len, p, tick;
    let w = window.innerWidth
    let h = window.innerHeight
    let cx = w / 2;
    let cy = h / 2;
    // 循环获取星点数据
    for (i = 0, len = this.stars.length; i < len; i++) {
      p = this.stars[i];
      tick = (this.avgData[this.index] > 100) ? (this.avgData[this.index] / 20) : (this.avgData[this.index] / 50);
      p.x += p.dx * tick;
      p.y += p.dy * tick;
      p.z += p.dz;

      p.dx += p.ddx;
      p.dy += p.ddy;
      p.radius = 0.2 + ((p.max_depth - p.z) * .1);

      if (p.x < -cx || p.x > cx || p.y < -cy || p.y > cy) {
        // 16.星点生成
        this.stars[i] = new this.Star(this.avgData[this.index]);
        continue;
      }
      // 画板操作
      ctx.beginPath();
      ctx.globalCompositeOperation = "lighter";
      ctx.fillStyle = p.color;
      ctx.arc(p.x + cx, p.y + cy, p.radius, Math.PI * 2, false);
      ctx.fill();
      ctx.closePath();
    }
    // ctx.fillStyle = 'yellow'
    // ctx.fillRect(0, 0, screenWidth, screenHeight)
  }
}